<!-- Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT License. -->
<!-- This file shows how to design a first-run page that provides a welcome screen to the user about the features of the add-in. -->

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Office Add-ins Excel Data Types Explorer</title>

    <!-- Office JavaScript API -->
    <script type="text/javascript" src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js"></script>

    <!-- For more information on Fluent UI, visit https://developer.microsoft.com/fluentui#/. -->
    <link rel="stylesheet" href="https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-core/11.1.0/css/fabric.min.css"/>

    <!-- Template styles -->
    <link href="taskpane.css" rel="stylesheet" type="text/css" />
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.js"></script>
</head>

<body class="ms-font-m ms-welcome ms-Fabric">
    <!-- The following image URL tracks diagnostic data for this sample add-in. Please remove the image tag if you reuse this sample in your own code project. -->
    <img src="https://pnptelemetry.azurewebsites.net/pnp-officeaddins/samples/office-excel-add-in-data-types-explorer-run" />
    
    <section class="ms-font-m main">
        <h1>Create and explore data types</h1>
        <p>Use this tool to create data types or to explore data types that already exist in a workbook.</p>
        <p>To create a data type, use the <strong>Data type</strong> dropdown list to choose a data type (string, double, boolean, entity, web image, or formatted number), enter data in the displayed fields, and then select the <strong>Set data</strong> button. The data type will be inserted into the currently active cell on the worksheet.</p>
        <p>To explore existing data types, select a cell on the worksheet that contains data, and then select the <strong>Get data</strong> button. The data type information will be displayed in the task pane fields.</p>

        <label><strong>Data type:</strong></label>
        <select id="dataTypeSelect" name="dataType" class="ms-Button ms-Button-label buttons">
            <option class="typeFNV" value="FormattedNumber" selected>Formatted number</option>
            <option class="typeEntity" value="Entity">Entity</option>
            <option class="typeImage" value="WebImage">Web image</option>
            <option class="typeString" value="String">String</option>
            <option class="typeDouble" value="Double">Double</option>
            <option class="typeBoolean" value="Boolean">Boolean</option>
        </select>
    
        <div id="dataTypeContents">
            <div class="backgroundColorForm solidBorder"></div>
        </div>

        <div>
            <button id="setData"" class="ms-Button ms-Button-label buttons" alt="set entered data into active cell">Set data</button>
            <label> | </label>
            <button id="getData" class="ms-Button ms-Button-label buttons">Get data</button>
            <label> | </label>
            <button id="clearForm" class="ms-Button ms-Button-label buttons" alt="clear current contents of input boxes">Clear form</button>
        </div>
    </section>  
    <section class="ms-font-m main">
        <p><a href="https://learn.microsoft.com/office/dev/add-ins/excel/excel-data-types-overview">Learn more about data types</a>.</p>
    </section>
</body>
</html>